<template>
	<view>
		<!-- 标题栏 -->
		<view class="top-box tn-cool-bg-color-15--reverse">
			<view class="text-lg text-white text-bold margin-left-xs">人员处罚审核系统</view>
			<view class="text-lg margin-right-sm text-bold" @click="gohistory()">历史申请</view>
		</view>

		<!-- 分类选择模块 -->
		<view style="display: flex;align-items: center;padding: 10rpx 20rpx;">
			<view class="text-bold">选择对象：</view>
			<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
				<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name" @change="radioChange">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</view>

		<!-- 人员选择模块 -->
		<view v-if="state == 0">
			<view style="width: 100%; height: 80rpx; display: flex;align-items: center;justify-content: space-between;" v-if="isHas == false">
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 50rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold">扣罚对象</view>
						<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearch()"></u-icon>
					</view>
				</view>
			</view>

			<view v-else>
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 40rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold text-blue" style="display: flex;align-items: center;flex-direction: row;">身份: {{ peopleInfo.data.position }}</view>
						<view class="text-xl text-bold " style="padding-right: 10rpx;">
							{{ peopleInfo.data.name }}
							<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearch()"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="state == 1">
			<view class="row">
				<text class="tit text-bold">骑手：</text>
				<view class="text-lg text-red text-bold" style="padding: 1rpx 20rpx;" @click="showNumberPopup">{{ position == '' ? '选择骑手' : position }}</view>
				<view class="text-red" style="flex:1; text-align: end;">必选</view>
			</view>
			<u-picker mode="selector" @confirm="NumberConfirm" v-model="showNumber" :isDefault-selector="[0]" :range="selector"></u-picker>
		</view>
		<view v-if="state == 2">
			<view style="width: 100%; height: 80rpx; display: flex;align-items: center;justify-content: space-between;" v-if="isHas == false">
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 50rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold">扣罚商家</view>
						<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearchStore()"></u-icon>
					</view>
				</view>
			</view>

			<view v-else>
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 40rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold text-blue" style="display: flex;align-items: center;flex-direction: row;">身份: {{ peopleInfo.data.position }}</view>
						<view class="text-xl text-bold " style="padding-right: 10rpx;">
							{{ peopleInfo.data.name }}
							<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearchStore()"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="state == 3">
			<view style="width: 100%; height: 80rpx; display: flex;align-items: center;justify-content: space-between;" v-if="isHas == false">
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 50rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold">扣罚商家</view>
						<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearchStore()"></u-icon>
					</view>
				</view>
			</view>

			<view v-else>
				<view class="main-check-image" style="display: flex; width: 100%; height: auto">
					<view class="" style="display: flex; width: 100%;height: 100%; padding: 10rpx 40rpx 10rpx 20rpx; justify-content: space-between;">
						<view class="text-lg text-bold text-blue" style="display: flex;align-items: center;flex-direction: row;">店铺名: {{ peopleInfo.data.position }}</view>
						<view class="text-xl text-bold " style="padding-right: 10rpx;">
							{{ peopleInfo.data.name }}
							<u-icon name="rewind-right-fill" size="40" color="#ffc107" @click="toSearchStore()"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- //附加奖励 及备注-->
		<view class="row b-b margin-top-sm" style="display: flex;align-items: center;justify-content: center;">
			<text class="text-xl text-bold">处罚金额：</text>
			<input class="input text-red text-xxl text-bold" type="number" @input="numberInput" placeholder="请填写金额" placeholder-class="placeholder" :value="addMoney" />
		</view>
		<view class="row" style="display: flex;align-items: center;justify-content: space-between;">
			<view class="left text-bold"><text>扣罚原因</text></view>
			<view class="right">
				<text v-if="remark" @click="showPopup">{{ remark }}</text>
				<text v-if="!remark" @click="showPopup">点击可填写备注</text>
				<i class="hxicon-right"></i>
			</view>
		</view>
		<!-- //弹窗 -->
		<u-toast ref="uToast" />

		<!-- //备注弹窗 -->
		<u-popup v-model="show" :closeable="true" @close="oneclose()" mode="top" border-radius="14">
			<view
				class=""
				style="background: linear-gradient(90deg, #ffa473, #ffe681);width: 100%; height: 700rpx; display: flex;flex-direction: column; padding: 40rpx 30rpx 10rpx 30rpx;"
			>
				<view class="container overflow-hidden" style="width: 100%; height: 100%;">
					<view class="textarea">
						<textarea
							placeholder-class="text-color-assist font-size-base"
							v-model="remark"
							class="bg-white border-box font-size-base remark"
							style="width: 100%;"
							:class="{ 'text-color-danger': remarkLength > 50, 'text-color-assist': remarkLength <= 50 }"
							placeholder="请填写写明扣罚原因"
							focus
						/>
						<view class="tips" :class="{ 'text-color-danger': remarkLength > 50, 'text-color-assist': remarkLength <= 50 }">{{ remarkLength }}/50</view>
					</view>
					<view class="font-size-base text-color-assist" style="margin: 20rpx 0; display: flex;">快捷输入</view>
					<view class="quick-inputs flex-wrap justify-content-start" style="display: flex;">
						<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)">{{ item }}</view>
					</view>
					<view class="d-flex just-content-center align-items-center" style="margin-top: 60rpx;">
						<button class="add-btn submit-btn font-size-base" @tap="submit">完成</button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- //结算按钮 -->
		<view style="margin-top:30rpx;display: flex;width: 100%;justify-content: space-around;">
			<!-- <view class="login__info__item__button tn-cool-bg-color-15--reverse " hover-class="tn-hover" :hover-stay-time="150" @click="calculate()">计算总薪资</view> -->
			<view class="login__info__item__button tn-cool-bg-color-15--reverse " hover-class="tn-hover" :hover-stay-time="150" @click="commit()">提交审核</view>
		</view>
	</view>
</template>

<script>
//时间
//数据库引入
const db = uniCloud.database();
const dbCmd = db.command;
//引入全局变量
var app = getApp();
import uswitch from 'uview-ui/components/u-switch/u-switch';
export default {
	components: {
		uswitch
	},
	data() {
		return {
			peopleInfo: {},
			isHas: false,
			show: false,
			openid: '',
			showNumber: false,
			name: '',
			state: 0, //0楼栋长 1骑手 2商家 3其它
			position: '',
			openidQishou: '',
			qishouList: [],
			qishouInfo: {}, //骑手信息
			selector: [], //骑手分餐员
			type: '',
			radiolist1: [
				{
					name: '楼栋长',
					disabled: false
				},
				{
					name: '骑手',
					disabled: false
				},
				{
					name: '商家',
					disabled: false
				},
				{
					name: '其它',
					disabled: false
				}
			],
			radiovalue1: '苹果',
			showArea: false,
			anonymous: false,
			todayTime: '', //当天时间
			totalMoney: 0, //总发薪资
			area: '',
			remark: '',
			addMoney: '',
			quickInputs: ['下雨1趟补贴', '下雨2趟补贴', '下雨2趟补贴', '早餐周奖', '连体楼']
		};
	},
	onLoad(options) {
		let that = this;
		//如果传入参数
		this.todayTime = new Date().toLocaleDateString();
		//加载骑手分餐员
		db.collection('inforcheck')
			.where({
				'data.rank': 1
			})
			.get({})
			.then(res => {
				console.log('骑手分餐员', res.result.data);
				let peopleList = res.result.data;
				that.qishouList = peopleList;
				for (let i = 0; i < peopleList.length; i++) {
					that.selector.push(peopleList[i].data.name);
				}
		 });
	},
	computed: {
		remarkLength() {
			return this.remark.length;
		},
		isDanger() {
			return this.remark.length > 50;
		}
	},
	onShow() {
		//选择人员状态改变
		let that = this;
		if (getApp().globalData.peopleMoneyInfoshauxin == true) {
			that.peopleInfo = getApp().globalData.peopleMoneyInfo;
			that.isHas = true;
			console.log('Has状态：', that.isHas);
			getApp().globalData.peopleMoneyInfoshauxin = false;
		} else {
			that.isHas = false;
		}
		//获取负责人OPENID
		that.chechLogin();
	},
	methods: {
		//去商家选择页
		toSearchStore() {
			uni.navigateTo({
				url: 'storeSearch'
			});
		},
		//判断登陆
		chechLogin() {
			let that = this;
			uni.getStorage({
				key: 'user_sxz',
				success(res) {
					//判断是否登陆
					if (res.data.openid == '' || res.data.openid == undefined) {
						uni.showModal({
							title: '您还没有绑定微信登陆，是否要现在进行绑定？',
							success(res) {
								uni.switchTab({
									url: '../../../me/me'
								});
								return;
							}
						});
					} else {
						console.log('获取到store本地数据', res);
						//1、赋值OPENID
						that.openid = res.data.openid;
						//2、赋值负责人姓名
						db.collection('inforcheck')
							.where({
								'data.openid': that.openid,
								'data.rank': 2
							})
							.get({})
							.then(res => {
								let people = res.result.data;
								if (people.length > 0) {
									that.name = people[0].data.name;
								} else {
									that.$refs.uToast.show({
										title: '你还不是负责人！',
										type: 'error'
									});
								}
							})
							.catch(res => {
								that.$refs.uToast.show({
									title: '获取负责人信息失败！',
									type: 'error'
								});
							});
					}
				},
				fail(res) {
					console.log('获取失败', res);
					uni.showModal({
						title: '您还没有绑定微信登陆，是否要现在进行绑定？',
						success(res) {
							uni.switchTab({
								url: '../../../me/me'
							});
							return;
						}
					});
				}
			});
		},
		//关闭弹窗
		oneclose() {},
		numberInput(e) {
			let that = this;
			this.addMoney = e.detail.value;
			// 同步
			console.log(e.detail.value);
		},
		showAreaPopup() {
			this.showArea = true;
		},
		AreaConfirm(e) {
			this.area = this.selectorArea[Number(e)];
			console.log('你选择的身份', this.area);
		},
		// 是否匿名
		postStatus(e) {
			this.anonymous = e;
			console.log(this.anonymous);
		},
		NumberConfirm(e) {
			this.position = this.selector[Number(e)];
			console.log('你选择的身份', this.position);
			//赋值openid
			this.openidQishou = this.qishouList[Number(e)].data.openid;
			console.log('OPENDI', this.openidQishou);
		},
		showNumberPopup() {
			let that = this;
			//骑手分配
			this.showNumber = true;
		},
		//单选框
		groupChange(n) {
			console.log('groupChange', n);
			// this.type = n;
		},
		radioChange(n) {
			console.log('radioChange', n);
			this.type = n;
			if (n == '楼栋长') {
				this.state = 0;
			} else if (n == '骑手') {
				this.state = 1;
			} else if (n == '商家') {
				this.state = 2;
			} else if (n == '其它') {
				this.state = 3;
			}
			console.log('type:', this.type);
		},
		//跳转搜索页
		toSearch() {
			uni.navigateTo({
				url: '../../../search/search'
			});
		},
		//打开备注弹窗
		showPopup() {
			let that = this;
			that.show = true;
		},
		//跳转到提交历史
		gohistory() {
			uni.navigateTo({
				url: '../moneyHistory/moneyHistory'
			});
		},
		//备注输入
		handleQuickInput(item) {
			this.remark = this.remark.concat(' ', item);
		},
		//完成按钮
		submit() {
			let that = this;
			that.show = false;
		},
		//提交财务数据
		commit() {
			let that = this;
			//判断是否备注明细
			if (that.type == '') {
				that.$refs.uToast.show({
					title: '未填写明细备注',
					type: 'error'
				});
				return;
			}
			//1、判断总薪资是否为0
			if (that.totalMoney == 0) {
				that.$refs.uToast.show({
					title: '总薪资为空',
					type: 'error'
				});
				return;
			}
			//2、判断附加奖励填写是否连带原因
			if (that.remark == '' && that.addMoney != '') {
				that.$refs.uToast.show({
					title: '附加奖励注意填写备注！',
					type: 'error'
				});
				return;
			}
			//3、判断是否选择放发对象
			if (!that.isHas) {
				that.$refs.uToast.show({
					title: '没有选择薪资放发对象！',
					type: 'error'
				});
				return;
			}
			//4、判断是否选择楼栋
			if (that.area == '') {
				that.$refs.uToast.show({
					title: '没有选择楼栋！',
					type: 'error'
				});
				return;
			}
			//5、构造提交信息
			let openidUser = that.peopleInfo.data.openid; //用户openid
			let openidCharge = that.openid; //负责人id
			let nameUser = that.peopleInfo.data.name; //用户姓名
			let nameCharge = that.name; //负责人姓名
			let numOrder = that.payList; //订单数组，包括总薪资
			let louNum = that.area; //楼栋长所送楼栋
			let addMoney = Number(that.addMoney); //附加奖励金额
			let remark = that.remark; //附加奖励备注
			let time = new Date().getTime(); //时间戳
			let totalMoney = that.totalMoney; //总薪资
			let type = that.type; //分类
			uni.showLoading({
				title: '正在提交中...'
			});
			// 6、数据库添加信息
			db.collection('moneyCheck')
				.add({
					data: {
						openidUser: openidUser, //用户openid
						openidCharge: openidCharge, //负责人id
						nameUser: nameUser, //用户姓名
						nameCharge: nameCharge, //负责人姓名
						numOrder: numOrder, //订单数组，包括总薪资
						louNum: louNum, //楼栋长所送楼栋
						addMoney: addMoney, //附加奖励金额
						remark: remark, //附加奖励备注
						status: 1, //未审核状态
						type: type,
						totalMoney: totalMoney, //总薪资
						time: time //时间戳
					}
				})
				.then(res => {
					uni.hideLoading();
					that.$refs.uToast.show({
						title: '提交成功！',
						type: 'success'
					});
					//初始化页面数据
					//1、初始化发放对象
					that.isHas = false;
					getApp().globalData.peopleMoneyInfo == {};
					that.peopleInfo = {};
					//2、初始化趟次
					for (var i = 0; i < that.payList.length; i++) {
						if (i < that.payList.length - 1) {
							that.payList[i].num = '';
						} else {
							that.payList[i].num = 0;
						}
					}
					//3、初始化楼栋
					that.area = '';
					//4、初始化奖励及备注
					that.addMoney = '';
					that.remark = '';
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	width: 100%;
	height: 100%;
}
.switch {
	display: flex;
	margin-top: 10rpx;
	padding: 0 15rpx;
	align-items: center;
	justify-content: space-between;
}
.row {
	display: flex;
	align-items: center;
	padding: 0 20rpx 0 20rpx;
	height: 50rpx;
	background: #fff;
}
.row .tit {
	width: 120rpx;
	font-size: 30rpx;
	color: #303133;
}

.row .input {
	flex: 1;
	font-size: 30rpx;
}

.row .icon-shouhuodizhi {
	font-size: 36rpx;
	color: #909399;
}
.all_box {
	padding: 10rpx;
}
.all_box_content {
	font-size: 45rpx;
	margin-top: 10rpx;
	color: #f37b1d;
}
.login__info__item__button {
	width: 600rpx;
	padding: 20rpx;
	border-radius: 5px;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
}
.login {
	position: relative;
	height: 100%;
	z-index: 1;

	/* 内容 start */
	&__wrapper {
		padding-top: 120rpx;
		width: 100%;
	}

	/* 切换 start */
	&__mode {
		position: relative;
		margin: 0 auto;
		width: 476rpx;
		height: 77rpx;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
		border-radius: 39rpx;

		&__item {
			height: 77rpx;
			width: 100%;
			line-height: 77rpx;
			text-align: center;
			font-size: 31rpx;
			color: #000000;
			font-weight: bold;
			letter-spacing: 1em;
			text-indent: 1em;
			z-index: 2;
			transition: all 0.4s;

			&--active {
				font-weight: bold;
				color: #ffffff;
			}
		}

		&__slider {
			position: absolute;
			height: inherit;
			width: calc(476rpx / 2);
			border-radius: inherit;
			box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
			z-index: 1;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
	}
}
.top-box {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list {
	width: 100%;
	height: 80rpx;
	display: flex;
	box-shadow: 0rpx 0rpx 3rpx rgba(0, 0, 0, 0.1);
	align-items: center;
	background-color: #ffffff;
}
.add-btn {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: 32rpx;
	color: #fff;
	background-color: #ffa473;
	border-radius: 10rpx;
	-webkit-box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.container {
	padding: 20rpx 40rpx;
	.textarea {
		position: relative;
		.remark {
			border-radius: 8rpx;
			padding: 30rpx 40rpx;
			height: 200rpx;
			color: $font-size-base;
		}
		.tips {
			position: absolute;
			bottom: 30rpx;
			right: 40rpx;
		}
	}

	.quick-inputs {
		padding-right: 20rpx;
		.quick-input {
			background-color: #ffffff;
			border: 3rpx solid #ffa473;
			color: #ffa473;
			font-size: $font-size-base;
			padding: 10rpx 16rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.submit-btn {
		width: 90%;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
	}
}
</style>
